<template>
    <div class="index"> 
        <main>
          <router-view></router-view>
        </main>  
        <footer>  
          <van-tabbar
          v-model="active"
          active-color="#333333"
          inactive-color="#CCCCCC">
              <van-tabbar-item
               @click="handleTabClick('/Index/Main')">
                <template #icon="props">
                  <i class="yo-ico">&#xe644;</i>
                </template>
              </van-tabbar-item>
              <van-tabbar-item
              @click="handleTabClick('/Index/topage')">
                <template #icon="props">
                  <i class="yo-ico">&#xe609;</i>
                </template>
              </van-tabbar-item>
              <van-tabbar-item
              @click="handleTabClick('/Index/Message')">
                <template #icon="props">
                  <i class="yo-ico">&#xe619;</i>
                </template>
              </van-tabbar-item>
              <van-tabbar-item
              @click="handleTabClick('/Index/mySettings')">
                <template #icon="props">
                  <i class="yo-ico">&#xe60b;</i>
                </template>
              </van-tabbar-item>
            </van-tabbar>
          </footer>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { Tabbar, TabbarItem } from 'vant';
    

     
    Vue.use(Tabbar);
    Vue.use(TabbarItem);
 export default{
     components: {
            
     },
    data() {
    return {
      show: false,
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
  methods: {

    handleTabClick(path) {
      this.$router.push(path)
    }
  },
 }   
</script>
<style lang="stylus" scoped>
   /* @import '../../assets/stylus/border.styl'  */
  .index
    height 100%
    overflow hidden
    display flex
    flex-direction column
    

    main
       flex 1
       overflow hidden
    
    footer
       height .44rem

       
       
  
</style>